import { useEffect, useState } from "react";
import { Table, Button, Form, Space, DatePicker, Card, Row, Input } from "antd";
import { getCompanySubteamList } from "@/api/modules/team";
import useAuthButtons from "@/hooks/useAuthButtons";
import dayjs from "dayjs";

import "./index.less";

const UseHooks = () => {
	const { BUTTONS } = useAuthButtons();
	const { RangePicker } = DatePicker;

	useEffect(() => {
		console.log(BUTTONS);
	}, []);

	const [page, setPage] = useState(1);
	const [pageSize, setPageSize] = useState(10);
	const [total, setTotal] = useState(0);
	const [list, setList] = useState([]);
	const [isonReset, setIsonReset] = useState(0);
	const [filters, setFilters] = useState({});
	const [datas, setDatas] = useState([]);

	useEffect(() => {
		getCompanyWithdraw();
	}, [page, pageSize, isonReset]);

	const getCompanyWithdraw = async () => {
		const { data } = await getCompanySubteamList({
			page: page,
			size: pageSize,
			order: "desc",
			sort: "id",
			...filters
		});
		setList(data.list);
		setDatas(data);
		setTotal(data.pagination.total);
	};

	const columns = [
		{
			title: "日期",
			dataIndex: "the_day",
			key: "the_day",
			align: "center"
		},
		{
			title: "团长ID",
			dataIndex: "team_invite_code",
			key: "team_invite_code",
			align: "center",
			render: text => text || "-"
		},
		{
			title: "团长收益",
			dataIndex: "donate",
			key: "donate",
			align: "center"
		}
	];

	const [form] = Form.useForm();

	const onReset = () => {
		form.resetFields();
		setFilters({
			team_invite_code: null,
			start_time: null,
			end_time: null
		});
		setPageSize(10);
		setPage(1);
		setIsonReset(isonReset + 1);
	};

	const onSubmit = values => {
		setPage(1);
		setIsonReset(isonReset + 1);
		console.log(values, filters);
	};

	const onRangeSearch = val => {
		setFilters({
			...filters,
			start_time: dayjs(val[0]).format("YYYY-MM-DD") + " 00:00:00",
			end_time: dayjs(val[1]).format("YYYY-MM-DD") + " 23:59:59"
		});
		// form.setFieldsValue({
		// 	start_time: dayjs(val[0]).format("YYYY-MM-DD") + " 00:00:00",
		// 	end_time: dayjs(val[1]).format("YYYY-MM-DD") + " 23:59:59"
		// });
	};

	return (
		<div className="content-box use-hooks">
			<Card>
				{/* <div className="date">
					<span>切换国际化的时候看我 😎 ：</span>
					<RangePicker />
				</div>
				<div className="auth">
					<Space>
						{BUTTONS.add && <Button type="primary">我是 Admin && User 能看到的按钮</Button>}
						{BUTTONS.delete && <Button type="primary">我是 Admin 能看到的按钮</Button>}
						{BUTTONS.edit && <Button type="primary">我是 User 能看到的按钮</Button>}
					</Space>
				</div> */}

				<div className="form-search">
					<Form form={form} layout="inline" onFinish={onSubmit}>
						<Form.Item name="team_invite_code" label="团长id">
							<Input
								placeholder="请输入团长id"
								onChange={e => {
									setFilters({
										...filters,
										team_invite_code: e.target.value
									});
								}}
							/>
						</Form.Item>
						<Form.Item name="time" label="日期">
							<RangePicker onChange={(_, dateStrings) => onRangeSearch(dateStrings)} />
						</Form.Item>
						<Form.Item>
							<Space>
								<Button type="primary" htmlType="submit">
									查询
								</Button>
								<Button type="primary" onClick={onReset}>
									重置
								</Button>
							</Space>
						</Form.Item>
					</Form>
				</div>

				<div className="title">
					<Row justify="space-between">
						<Form.Item label="团长人数:">{datas.sub_team_num} </Form.Item>
						<Form.Item label="总收益:">{datas.sum_income}</Form.Item>
						<Form.Item label="筛选后收益:">{datas.date_sum_income}</Form.Item>
					</Row>
				</div>

				<Table
					columns={columns}
					dataSource={list}
					bordered={true}
					rowKey="the_day"
					pagination={{
						total: total,
						pageSizeOptions: ["10", "20", "30", "50", "100"],
						showTotal: total => `共${total}条`,
						showSizeChanger: true,
						showQuickJumper: true,
						pageSize: pageSize,
						current: page,
						onChange: (page, size) => {
							setPage(page);
							setPageSize(size);
						}
					}}
				/>
			</Card>
		</div>
	);
};

export default UseHooks;
